<template>
  <div class="correct">
    <header-nav :leftArrow="true" titelText="责令改正通知书"></header-nav>

    <div class="correct-content">
      <div class="tip">根据模板填写，蓝色为必填，其他数据由程序生成</div>
      <div class="model">
        <div class="model-title" :style="openFlag ? 'border-bottom: 1px solid #f0f0f0;' : ''">
          <div>文件模版预览</div>
          <img v-if="openFlag" src="../../assets/images/modelOpen.png" alt="" @click="openFlag = false" />
          <img v-else src="../../assets/images/modelClose.png" alt="" @click="openFlag = true" />
        </div>
        <div class="model-text" v-if="openFlag">
          <div class="top">(此处印制消防救援机构名称)</div>
          <div class="modelTitle">责令改正通知书</div>
          <div class="modelNumber">
            <span class="blue">__</span>
            <span>消安检字〔</span>
            <span class="blue">__</span>
            <span>〕第</span>
            <span class="blue">__</span>
            <span>号</span>
          </div>
          <div class="modelName">__________：</div>
          <div class="modelText">
            根据《中华人民共和国消防法》第五十三条的规定，我____于____年__月__
            日对你单位（场所）进行消防监督检查，发现存在下列第__
            项消防安全违法行为：
          </div>
          <div class="modelText"><span class="blue">1</span></div>
          <div class="modelText">具体问题：_________</div>
          <div class="modelText">
            对上述第__项，责令你单位(场所)于
            <span class="blue">_2_</span>
            前改正。
          </div>
          <div class="modelText">
            改正期间，你单位(场所)应当采取措施，确保消防安全。对消防安全违法行为，将依法予以处罚
          </div>
          <div class="modelNumber">被检查单位（场所）签收：______</div>
          <div class="modelNumber">____年____月____日</div>
          <div class="modelNumber">（印章）</div>
          <div style="font-size: 14px; font-weight: 400; color: #4d4d4d">
            一式两份，一份交被检查单位（场所），一份存档。
          </div>
        </div>
      </div>

      <div class="content" :style="openFlag
      ? 'height: calc(100% - 490px);'
      : 'height: calc(100% - 160px);'
      ">
        <div class="content-title">内容填写</div>
        <div class="content-title">
          <span style="color: #ee0a24; margin-right: 2px">*</span>
          <span class="blue" style="font-size: 16px;margin-right: 12px;">1</span>
          检查内容
        </div>
        <div class="checkBox">
          <van-checkbox v-model="checkeds[0]" disabled>
            <span class="num">1.</span>
          </van-checkbox>
          <van-checkbox v-model="checkeds[1]" style="margin-left: 12px" @change="change0">
            <span class="num2">未依法进行消防设计备案，竣工验收消防备案</span>
          </van-checkbox>
        </div>
        <div class="checkBox">
          <van-checkbox v-model="checkeds[2]" disabled>
            <span class="num">2.</span>
          </van-checkbox>
          <van-checkbox v-model="checkeds[3]" style="margin-left: 12px" @change="change2">
            <span class="num2">
              消防设施、器材、消防安全标志配置、设置不符合标准
            </span>
          </van-checkbox>
          <van-checkbox v-model="checkeds[4]" style="margin-left: 12px" @change="change2">
            <span class="num2">消防安全标志未保持完好有效</span>
          </van-checkbox>
        </div>
        <div class="checkBox">
          <van-checkbox v-model="checkeds[5]" disabled>
            <span class="num">3.</span>
          </van-checkbox>
          <van-checkbox v-model="checkeds[6]" style="margin-left: 12px" @change="change5">
            <span class="num2">损坏</span>
          </van-checkbox>
          <van-checkbox v-model="checkeds[7]" style="margin-left: 12px" @change="change5">
            <span class="num2">挪用</span>
          </van-checkbox>
          <van-checkbox v-model="checkeds[8]" style="margin-left: 12px" @change="change5">
            <span class="num2">擅自拆除</span>
          </van-checkbox>
          <van-checkbox v-model="checkeds[9]" style="margin-left: 12px" @change="change5">
            <span class="num2">停用消防设施、器材</span>
          </van-checkbox>
        </div>
        <div class="checkBox">
          <van-checkbox v-model="checkeds[10]" disabled>
            <span class="num">4.</span>
          </van-checkbox>
          <van-checkbox v-model="checkeds[11]" style="margin-left: 12px" @change="change10">
            <span class="num2">占用</span>
          </van-checkbox>
          <van-checkbox v-model="checkeds[12]" style="margin-left: 12px" @change="change10">
            <span class="num2">堵塞</span>
          </van-checkbox>
          <van-checkbox v-model="checkeds[13]" style="margin-left: 12px" @change="change10">
            <span class="num2">封闭疏散通道、安全出口</span>
          </van-checkbox>
        </div>
        <div class="checkBox">
          <van-checkbox v-model="checkeds[14]" disabled>
            <span class="num">5.</span>
          </van-checkbox>
          <van-checkbox v-model="checkeds[15]" style="margin-left: 12px" @change="change14">
            <span class="num2">埋压</span>
          </van-checkbox>
          <van-checkbox v-model="checkeds[16]" style="margin-left: 12px" @change="change14">
            <span class="num2">圈占</span>
          </van-checkbox>
          <van-checkbox v-model="checkeds[17]" style="margin-left: 12px" @change="change14">
            <span class="num2">遮挡消火栓</span>
          </van-checkbox>
          <van-checkbox v-model="checkeds[18]" style="margin-left: 12px" @change="change14">
            <span class="num2">占用防火间距</span>
          </van-checkbox>
        </div>
        <div class="checkBox">
          <van-checkbox v-model="checkeds[19]" disabled>
            <span class="num">6.</span>
          </van-checkbox>
          <van-checkbox v-model="checkeds[20]" style="margin-left: 12px" @change="change19">
            <span class="num2">占用</span>
          </van-checkbox>
          <van-checkbox v-model="checkeds[21]" style="margin-left: 12px" @change="change19">
            <span class="num2">堵塞</span>
          </van-checkbox>
          <van-checkbox v-model="checkeds[22]" style="margin-left: 12px" @change="change19">
            <span class="num2">封闭消防车通道，妨碍消防车通行</span>
          </van-checkbox>
        </div>
        <div class="checkBox">
          <van-checkbox v-model="checkeds[23]">
            <span class="num">7.</span>
            <span class="num2">
              人员密集场所外墙门窗上设置影响逃生、灭火救援的障碍物
            </span>
          </van-checkbox>
        </div>
        <div class="checkBox">
          <van-checkbox v-model="checkeds[24]" disabled>
            <span class="num">8.</span>
          </van-checkbox>
          <van-checkbox v-model="checkeds[25]" style="margin-left: 12px" @change="change24">
            <span class="num2">使用不符合市场准入</span>
          </van-checkbox>
          <van-checkbox v-model="checkeds[26]" style="margin-left: 12px" @change="change24">
            <span class="num2">不合格</span>
          </van-checkbox>
          <van-checkbox v-model="checkeds[27]" style="margin-left: 12px" @change="change24">
            <span class="num2">国家明令淘汰的消防产品</span>
          </van-checkbox>
        </div>
        <div class="checkBox">
          <van-checkbox v-model="checkeds[28]" disabled>
            <span class="num">9.</span>
          </van-checkbox>
          <van-checkbox v-model="checkeds[39]" style="margin-left: 12px" @change="change28">
            <span class="num2">电器产品</span>
          </van-checkbox>
          <van-checkbox v-model="checkeds[30]" style="margin-left: 12px" @change="change28">
            <span class="num2">
              燃气用具的安装、使用及其线路、管路的设计、敷设、维护保养、检测不符合消防技术标准和管理规定
            </span>
          </van-checkbox>
        </div>
        <div class="checkBox">
          <van-checkbox v-model="checkeds[31]" disabled>
            <span class="num">10.</span>
            <span class="num">
              不履行《中华人民共和国消防法》第二款规定的其他消防安全职责
            </span>
          </van-checkbox>
          <van-checkbox v-model="checkeds[32]" style="margin-left: 12px" @change="change31">
            <span class="num2">第十六条</span>
          </van-checkbox>
          <van-checkbox v-model="checkeds[33]" style="margin-left: 12px" @change="change31">
            <span class="num2">第十七条</span>
          </van-checkbox>
          <van-checkbox v-model="checkeds[34]" style="margin-left: 12px" @change="change31">
            <span class="num2">第十八条</span>
          </van-checkbox>
          <van-checkbox v-model="checkeds[35]" style="margin-left: 12px" @change="change31">
            <span class="num2">第二十一条</span>
          </van-checkbox>
        </div>
        <div class="checkBox">
          <van-checkbox v-model="checkeds[36]">
            <span class="num">11.</span>
            <span class="num2"> 其他消防安全违法行为和火灾隐患 </span>
          </van-checkbox>
        </div>
        <div class="checkBox" v-if="checkeds[36]">
          <van-field v-model="wsForm.writeMsg" required placeholder="请输入其他消防安全违法行为和火灾隐患" style="padding: 0"
            maxlength="68" />
        </div>
        <div class="line10"></div>
        <div class="content-form">
          <div class="textBox">
            <div><span style="color: #ee0a24; margin-right: 2px">*</span><span style="font-size: 16px;">2</span></div>
            <van-field v-model="wsForm.lastDate" is-link readonly required placeholder="请选择复查日期"
              @click="lastDateSelect" />
          </div>
        </div>

        <!-- 日期选择 -->
        <van-popup v-model:show="birthdatePicker" round position="bottom">
          <van-date-picker v-model="currentDate" title="选择年月" :columns-type="columnsType"
            @cancel="birthdatePicker = false" @confirm="birthdatePickerConfirm" />
        </van-popup>

        <div class="checkBox">
          <van-button block type="primary" @click="submit()"> 保存 </van-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { showNotify, showSuccessToast, showFailToast } from 'vant'
const { usePublic } = $globalStore
const router = useRouter()
const route = useRoute()
const id = ref(route.query.id)
const openFlag = ref(true)

//选择复查日期
const birthdatePicker = ref(false)
const columnsType = ['year', 'month', 'day']
const currentDate = ref([new Date().getFullYear() + '', new Date().getMonth() + 1 + '', new Date().getDate() + ''])
const lastDateSelect = () => {
  birthdatePicker.value = true
}
const birthdatePickerConfirm = () => {
  wsForm.lastDate =
    currentDate.value[0] +
    '-' +
    currentDate.value[1] +
    '-' +
    currentDate.value[2]

  birthdatePicker.value = false
}

const checkeds = ref([
  false,
  false,
  false,
  false,
  false,
  false,
  false,
  false,
  false,
  false,
  false,
  false,
  false,
  false,
  false,
  false,
  false,
  false,
  false,
  false,
  false,
  false,
  false,
  false,
  false,
  false,
  false,
  false,
  false,
  false,
  false,
  false,
  false,
  false,
  false,
  false,
  false,
])

const wsForm = reactive({
  id: id.value,
  shortName: '',
  charName: '',
  numberName: '',
  type: 8,
  lastDate: '',
  writeMsg: '',
  checkObjArr: [
    0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
    0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
  ],
})

const submit = async () => {
  checkeds.value.forEach((item, i) => {
    if (item) {
      wsForm.checkObjArr[i] = 1
    }
  })
  if (!wsForm.checkObjArr.includes(1)) {
    return showNotify({ type: 'danger', message: '请选择需要改正的内容' })
  } else if (wsForm.lastDate == '') {
    return showNotify({ type: 'danger', message: '请选择复查日期' })
  } else if (wsForm.checkObjArr[36] == 1 && wsForm.writeMsg == '') {
    return showNotify({
      type: 'danger',
      message: '请输入其他消防安全违法行为和火灾隐患',
    })
  }
  const res = await usePublic.docProduct(wsForm)
  if (res.code == 0) {
    showSuccessToast('制作成功')
    router.push({ name: 'checkResultTask', query: { id: route.query.id, params: route.query.params } })
  } else {
    showFailToast(res.message)
  }
  console.log(wsForm)
}

const change0 = (val) => {
  if (val) {
    checkeds.value[0] = true
  }
  if (!checkeds.value[1]) {
    checkeds.value[0] = false
  }
}
const change2 = (val) => {
  if (val) {
    checkeds.value[2] = true
  }
  if (!checkeds.value[3] && !checkeds.value[4]) {
    checkeds.value[2] = false
  }
}
const change5 = (val) => {
  if (val) {
    checkeds.value[5] = true
  }
  if (!checkeds.value[6] && !checkeds.value[7] && !checkeds.value[8] && !checkeds.value[9]) {
    checkeds.value[5] = false
  }
}
const change10 = (val) => {
  if (val) {
    checkeds.value[10] = true
  }
  if (!checkeds.value[11] && !checkeds.value[12] && !checkeds.value[13]) {
    checkeds.value[10] = false
  }
}
const change14 = (val) => {
  if (val) {
    checkeds.value[14] = true
  }
  if (!checkeds.value[15] && !checkeds.value[16] && !checkeds.value[17] && !checkeds.value[18]) {
    checkeds.value[14] = false
  }
}
const change19 = (val) => {
  if (val) {
    checkeds.value[19] = true
  }
  if (!checkeds.value[20] && !checkeds.value[21] && !checkeds.value[22]) {
    checkeds.value[19] = false
  }
}
const change24 = (val) => {
  if (val) {
    checkeds.value[24] = true
  }
  if (!checkeds.value[25] && !checkeds.value[26] && !checkeds.value[27]) {
    checkeds.value[24] = false
  }
}
const change28 = (val) => {
  if (val) {
    checkeds.value[28] = true
  }
  if (!checkeds.value[29] && !checkeds.value[30]) {
    checkeds.value[28] = false
  }
}
const change31 = (val) => {
  if (val) {
    checkeds.value[31] = true
  }
  if (!checkeds.value[32] && !checkeds.value[33] && !checkeds.value[34] && !checkeds.value[35]) {
    checkeds.value[31] = false
  }
}
</script>

<style lang="scss" scoped>
.correct {
  width: 100%;
  height: 100%;
  overflow-y: hidden;
  background-color: #1764ce;

  .correct-content {
    width: 100%;
    height: 100%;
    overflow-y: hidden;
    margin-top: 46px;

    .tip {
      padding: 11px 16px;
      background-color: rgba(254, 241, 230, 1);
      color: #fc770a;
      font-size: 14px;
      font-weight: 400;
      letter-spacing: 0px;
      line-height: 20px;
    }

    .model {
      margin: 10px 8px;
      background-color: #ffffff;
      border-radius: 8px;

      .model-title {
        padding: 16px 12px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        >img {
          width: 20px;
          height: 20px;
        }

        >div {
          font-size: 16px;
          font-weight: 500;
          letter-spacing: 0px;
          line-height: 24px;
          color: #4d4d4d;
        }
      }

      .model-text {
        max-height: 300px;
        overflow-y: auto;
        padding: 16px 12px 12px 12px;

        .top {
          text-align: center;
        }

        .modelTitle {
          margin: 8px 0;
          text-align: center;
          font-size: 14px;
          font-weight: 400;
          letter-spacing: 0px;
          line-height: 20px;
          color: #000000;
        }

        .modelNumber {
          text-align: right;
          font-size: 14px;
          font-weight: 400;
          letter-spacing: 0px;
          line-height: 20px;
          color: #4d4d4d;
        }

        .modelName {
          text-align: left;
          font-size: 14px;
          font-weight: 400;
          letter-spacing: 0px;
          line-height: 20px;
          margin: 8px 0;
        }

        .modelText {
          text-align: left;
          text-indent: 2em;
          font-size: 14px;
          font-weight: 400;
          letter-spacing: 0px;
          line-height: 20px;
          color: #4d4d4d;
        }
      }
    }

    .content {
      overflow-y: auto;
      background-color: #ffffff;
      border-radius: 8px 8px 0 0;

      .content-title {
        padding: 16px;
        font-size: 16px;
        font-weight: 500;
        letter-spacing: 0px;
        line-height: 24px;
        border-bottom: 1px solid #f0f0f0;
      }

      .content-form {
        .textBox {
          display: flex;
          align-items: center;
          padding: 16px;
          border-bottom: 1px solid #f5f5f5;

          >div {
            line-height: 24px;
            font-size: 16px;
            color: #1764ce;
          }
        }
      }
    }
  }

  .checkBox {
    margin: 0 16px;
    padding: 16px 0;
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid #f5f5f5;
  }
}

.blue {
  color: #1764ce;
  // text-decoration: underline;
}

.num {
  font-size: 16px;
  font-weight: 500;
  color: #666666;
}

.num2 {
  font-size: 14px;
  font-weight: 400;
  color: #666666;
}

.line10 {
  width: 100%;
  height: 10px;
  background-color: #f7f7f7;
}
</style>
